
<template>
    <div class="wrap" style="padding: 15px">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="规则名称" prop="name">
                <el-input v-model="form.name" style="width: 220px;"></el-input>
            </el-form-item>
            <el-button type="primary" @click="addItem">新增</el-button>
            <div v-for="(item, index) in form.info" :key="index" class="item">
                <div class="od">
                    <p>类型</p>
                    <el-select v-model="item.type" placeholder="请选择">
                        <el-option label="填空" value="0"></el-option>
                        <el-option label="单选" value="1"></el-option>
                    </el-select>
                </div>
                <!-- 填空 -->
                <div v-if="item.type === '0'" class="od">
                    <p>标题</p>
                    <el-input v-model="item.summary" style="width: 220px;"></el-input>
                </div>
                <!-- 单选 -->
                <div v-if="item.type === '1'" class="od">
                    <p>标题</p>
                    <el-input v-model="item.summary" style="width: 220px;"></el-input>
                </div>

                <el-button type="success" icon="el-icon-plus" class="btn-del" style="width: 40px;height: 40px;" v-if="item.type === '1'"
                    @click="addRadio(item, index)" circle></el-button>
                <div class="radioBox">
                    <div class="radioItem" v-for="(radio, rindex) in item.children" :key="rindex">

                        <el-input v-model="radio.summary" style="width: 220px;" @input="bindChang"></el-input>
                        <el-button type="info" icon="el-icon-delete" class="btn-del" circle
                            @click="delRadioItem(index,rindex)"></el-button>
                    </div>


                </div>
                <el-button type="danger" icon="el-icon-delete" class="btn-del" style="width: 40px;height: 40px;" circle @click="delItem(index)"></el-button>
            </div>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">{{$route.query.id?'更新':'立即创建'}}</el-button>
                <el-button @click="cancle">取消</el-button>
            </el-form-item>
        </el-form>


    </div>
</template>
<script>
import { gameTemplateSaveInfo,gameTemplateShowInfo } from '@/config/api'
export default {
    components: {
    },
    data() {
        return {

            form: {
                naem: "",
                info: [

                ]
            },
            rules:{
                name: [
                    { required: true, message: '请输入规则名称', trigger: 'blur' },
                ],
            }
        };
    },

    created() {
        if(this.$route.query.id){
            this.getRuleInfo(this.$route.query.id)
        }
    },
    methods: {
        async getRuleInfo(id){
            const res = await gameTemplateShowInfo({id})
            const data = res.data.result
            this.form = {
                name:data.name,
                id:data.id,
                info:data.info
            }
        },
        addItem() {
            this.form.info.push({ type: "", summary: "" })
        },
        delItem(index) {
            this.form.info.splice(index, 1)
        },
        addRadio(item, index) {
            if (this.form.info[index].children) {
                this.form.info[index].children.push({ summary: "",type:'2' })
            } else {
                this.form.info[index].children = []
                this.form.info[index].children.push({ summary: "",type:'2' })
            }
            this.$forceUpdate()

        },
        delRadioItem(index,rindex){
            this.form.info[index].children.splice(rindex,1)
            this.$forceUpdate()
        },
        bindChang(){
            this.$forceUpdate()
        },
        cancle(){
            this.$router.go(-1)
        },
        async submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    const res = await gameTemplateSaveInfo(this.form)
                    if (res.data.status == 200) {
                        this.$alert('操作成功', '提示', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.$router.go(-1)
                            }
                        });
                    }

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

    }
};
</script>
<style  lang="scss">
.item {
    display: flex;
    margin-top: 15px;
    margin-bottom: 30px;
    align-items: flex-start;
    .od {
        display: flex;
        align-items: center;
        margin-left: 30px;

        p {
            margin-right: 10px;
        }
    }

    .btn-del {
        margin-left: 30px;
    }

    .radioBox {
        margin-left: 15px;
        .radioItem{
            margin-bottom: 10px;
        }
    }
}</style>